@charset "UTF-8";
/// `grid-media` allows you to change your layout based on a media query.
/// For example, an object can span 3 columns on small screens and 6 columns
/// on large screens.
///
/// You can take this a step further and set different grid attributes like
/// gutter size and total column count for each media query. So, for example,
/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
/// screens.
///
/// @group features
///
/// @name Grid media
///
/// @argument {map} $grid
///   The grid to be used within the scope of the block.
///   This grid should include the `media` property to determine the expression
///   for the media query.
///
/// @content
///   Grid media will temporarily the override the default grid with the
///   attributes of the custom grid. This change is scoped to within the mixin
///   block, and once the mixin has ended the default grid will revert to its
///   original state as defined by `$neat-grid`. This allows for different
///   gutter width and column count based on screen size or other properties.
///
/// @example scss
///   $custom-neat-grid: (
///     columns: 12,
///     gutter: 50px,
///     media: 1000px,
///   );
///
///   .element {
///     @include grid-column(3);
///
///     @include grid-media($custom-neat-grid){
///       @include grid-column(6);
///     }
///   }
///
/// @example css
///   .element {
///     width: calc(25% - 25px);
///     float: left;
///     margin-left: 20px;
///   }
///
///   @media only screen and (min-width: 1000px) {
///     .element {
///       width: calc(50% - 75px);
///       float: left;
///       margin-left: 50px;
///     }
///   }

@mixin grid-media($grid) {
  $_media: _retrieve-neat-setting($grid, media);
  $_query: _neat-parse-media($_media);

  @media #{$_query} {
    $_default-neat-grid: $neat-grid;
    $neat-grid: map-merge($neat-grid, $grid) !global;
    @content;
    $neat-grid: $_default-neat-grid !global;
  }
}
